import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { Header } from '../common/header';

import '../common/header.scss'
import './index.scss'
import '../../icon.scss'

export default class Index extends Component {

  constructor(){
    super();
    this.state = {
      address:[],
      select: 0,
      o_id:null,
    }
  }

  componentWillMount () { 
  }

  componentDidMount () {
    let oid = parseInt(this.$router.params.o_id)?parseInt(this.$router.params.o_id):null;
    this.setState({
      select:parseInt(this.$router.params.a_id)?parseInt(this.$router.params.a_id):null,
      o_id : oid
    });
    let that = this;
    let user = Taro.getStorageSync('user');
    Taro.request({
      credentials:'include',
      url: 'https://guoxiaojian.guoxiaoge.cn/api/user/address',
      data:{
        token : user.token
      },
      success:(res) => {
        if(res.statusCode === 200){
          if(res.data.status === 'SUCCESS'){
            that.setState({
              address:res.data.data
            });
          }else{
            if(res.data.status === 'FAILED'){
              if(res.data.failedCode === 'NO_LOGIN'){
                Taro.navigateTo({
                  url:'/pages/login/login'
                });
              }
            }
          }
        }
      }
    })
   }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  onClickLeftIcon(){
    Taro.navigateBack();
  }

  handleRedirectAdd(){
    Taro.navigateTo({
      url: '/pages/address/add?back=1'
    });
  }

  handleUpdateUseing(id, field, val){
    let that = this;
    let user = Taro.getStorageSync('user');

    that.setState({
      loading:true
    });

    let data = {
      id : id,
      token: user.token
    };

    if(field === 'useing'){
      data.useing = val
    }else if(field === 'del'){
      data.del = 1;
    }

    Taro.request({
      credentials:'include',
      url: 'https://guoxiaojian.guoxiaoge.cn/api/user/address/update',
      method:'POST',
      data:data,
      success:(res) => {
        if(res.statusCode === 200){
          if(res.data.status === 'SUCCESS'){
              let address = [];
              let j = 0;
              for(let i = 0; i < this.state.address.length; i++){
                if(field === 'useing'){
                  if(this.state.address[i].id === id){
                    this.state.address[i].useing = 1;
                  }else{
                    this.state.address[i].useing = 0;
                  }
                  address[j] = this.state.address[i];
                  j++;
                }else if(field === 'del'){
                  if(this.state.address[i].id === id){
                  }else{
                    address[j] = this.state.address[i];
                    j++;
                  }
                }
              }
              this.setState({
                address:address
              });
          }else{
            if(res.data.status === 'FAILED'){
              if(res.data.failedCode === 'NO_LOGIN'){
                Taro.navigateTo({
                  url:'/pages/login/login'
                });
              }
            }
          }
        }
      }
    })
  }

  handleEdit(id){
    Taro.navigateTo({
      url:'/pages/address/add?id='+id+'&back=1'
    });
  }

  handleUseAddress(id){
    let that = this;
    let user = Taro.getStorageSync('user');

    that.setState({
      loading:true
    });

    let data = {
      a_id : id,
      o_id : that.state.o_id,
      token: user.token
    };

    Taro.request({
      credentials:'include',
      url: 'https://guoxiaojian.guoxiaoge.cn/api/order/address/update',
      method:'POST',
      data:data,
      success:(res) => {
        if(res.statusCode === 200){
          if(res.data.status === 'SUCCESS'){
            Taro.navigateTo({
              url:'/pages/order/confirm?id='+that.state.o_id
            });
          }else{
            if(res.data.status === 'FAILED'){
              if(res.data.failedCode === 'NO_LOGIN'){
                Taro.navigateTo({
                  url:'/pages/login/login'
                });
              }
            }
          }
        }
      }
    })
  }

  render () {
    return (
      <View>
       <Header 
          leftIconType='chevron-left' 
          onClickLeftIcon={this.onClickLeftIcon} 
          title='收货地址'>
        </Header>
        <ScrollView style={{marginBottom:'88px'}}>
          {
            this.state.address.map(function(item){
            return <View className='address-list'>
              <View className='address-list-content'>
                <View className='address-list-item'>
                  <View className='address-list-item-name'>
                    <View>{item.name}</View>
                    <View className='address-list-item-mobile'>{item.mobile}</View>
                  </View>
                  <View className='address-list-item-detail'>{item.province} {item.city} {item.district} {item.address} {item.house_number}</View>
                </View>
                {
                  this.state.select === item.id
                  ?
                  <AtIcon prefixClass='icon' value='guanbi' size='22' color='#F2CA26'></AtIcon>
                  :
                  <View className='address-check-use' onClick={this.handleUseAddress.bind(this, item.id)}>使用</View>
                }
              </View>
              <View className='address-list-action'>
                  {
                    item.useing
                    ?
                    <View className='address-list-action-left'>
                      <AtIcon prefixClass='icon' value='xuanze' size='18' color='#F2CA26'></AtIcon>
                      <View className='ml10'>已设为默认</View>
                    </View>
                    :
                    <View className='address-list-action-left' onClick={this.handleUpdateUseing.bind(this, item.id, 'useing', item.useing?0:1)}>
                      <AtIcon prefixClass='icon' value='weixuanzhongyuanquan' size='18' color='#8A857C'></AtIcon>
                      <View className='ml10'>设为默认</View>
                    </View>
                  }
                
                <View className='address-list-action-right'>
                  <View className='address-list-action-bj'onClick={this.handleEdit.bind(this, item.id)}>
                    <AtIcon prefixClass='icon' value='icon6' size='12' color='#8A857C'></AtIcon>
                    <View className='ml10'>编辑</View>
                  </View>
                  <View className='address-list-action-sc' onClick={this.handleUpdateUseing.bind(this, item.id, 'del', 1)}>
                    <AtIcon prefixClass='icon' value='shanchu' size='12' color='#8A857C'></AtIcon>
                    <View className='ml10'>删除</View>
                  </View>
                </View>
              </View>
            </View>
            })
          }
        </ScrollView>
        <View onClick={this.handleRedirectAdd} className='address-add'>添加地址</View>
      </View>
    )
  }
}